<template>
    <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>数据分析报表</el-breadcrumb-item>
        <el-breadcrumb-item>车间库存报表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
        <div class="about" id="main"></div>
    </el-card>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    data () {
        return {
            allList:[]
        }
    },
 mounted() {
    let fromdata = new FormData();
    fromdata.append("pageSize",10)
    axios.post('/IE_MES/kanban/getMaterialConsumptionDataFindByPage.shtml',fromdata).then(
      res => {
        console.log(res.data.records);
        this.allList = res.data.records;
        const sellerNames = this.allList.map((item) => {
            return item.item
        });
        const sellerValues = this.allList.map((item) => {
            return item.kc
        });
        const balanceDown = this.allList.map((item) => {
            return item.balance_down
        });
    // 基于准备好的dom，初始化echarts实例
    var myChart = this.$echarts.init(document.getElementById("main"));
    // 绘制图表
    myChart.setOption({
      title: {
        text: "车间库存报表",
        left: "center",
        textStyle: {
        fontSize: 30,
        fontWeight: "bolder"
        },
        },
      tooltip: {trigger: 'item'},
      legend: {
        orient: 'vertical',
        left: 'left',
    },
      xAxis: {
        data: sellerNames,
        type:"category",
　　    axisLabel :{
　　　　interval:0
　　    }
      },
      yAxis: {},
      series: [
        {
          name: "库存数量",
          type: "bar",
          data: sellerValues,
          barWidth: 60,
        },{
          name: "安全库存数",
          type: "line",
          data: balanceDown,
          label: {
            show: true
            }
        }
      ],
    });
    }
    )

  }
}
</script>

<style lang="less" scoped>
#main {
  height: 600px;
  width: 100%;
}
</style>